<template>
  <div>
    <div ref="echarts" style="width: 600px; height: 400px;"></div>
    <button type="button" @click="testMock">点击</button>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import axios from 'axios'
export default {
  name: 'EChartsComponent',
  data () {
    return {
      myChart: undefined
    }
  },
  mounted () {
    this.myChart = echarts.init(this.$refs.echarts)
    this.myChart.setOption({
      title: {
        // 主标题
        text: "图例"
      },
      legend: {
        show: true,
        left: 'center',
        // left: "20%",
        // top: "10%",
        // width: "60%",
        // height: "80%",
        orient: 'horizontal', // 'horizontal', 'vertical'
        padding: [5, 5, 5, 5],
        backgroundColor: 'transparent', // "rgba(255, 0, 0, 1)"
        data: [{
          // 必须和 data 一一对应
          name: '销量',
          // 强制设置图形为圆。
          // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
          icon: 'circle',
          // 设置文本为红色
          textStyle: {
            color: "rgba(51, 51, 51, 1)",
            fontStyle: "normal",
            fontWeight: "normal",
            fontSize: 14,
            backgroundColor: 'transparent', //  "rgba(255, 255, 255, 1)",
            width: 40,
            height: 17
          },
          itemGap: 10,
          itemHeight: 12,
          itemWidth: 25,
          itemStyle: {
            borderType: "dashed",
            opacity: 0.8
          }
        },
        {
          name: '储量',
          // 强制设置图形为圆。
          // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
          icon: 'triangle',
          // 设置文本为红色
          textStyle: {
            color: "rgba(51, 51, 51, 1)",
            fontStyle: "normal",
            fontWeight: "normal",
            fontSize: 14,
            backgroundColor: 'transparent', //  "rgba(255, 255, 255, 1)",
            width: 40,
            height: 17
          },
          itemGap: 10,
          itemHeight: 12,
          itemWidth: 25,
          itemStyle: {
            borderType: "dashed",
            opacity: 0.8
          }
        }]
      },
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        },
        {
          name: '储量',
          type: 'bar',
          data: [15, 120, 136, 110, 110, 120]
        }
      ]
    })
  },
  methods: {
    testMock () {
      axios.get('/mock/echarts1').then(response => {
        this.myChart.setOption({
          series: [
            {
              name: '储量',
              type: 'line',
              data: response.data.data.items
            }
          ]
        })
        console.log('response', response.data.data.items)
      })
    }
  }
}
</script>
<style lang="scss" scoped></style>
